<template>
    <div class="homeWraper">
    <el-container  style="height:100%" direction="vertical">
        <el-header><!-- 头部区 -->
            <div>
                <span>校园志愿活动参与平台</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
              <el-menu
              background-color="#eee5f8"
    text-color="#fff"
    active-text-color="#ffd04b" router>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>活动</span>
      </template>
      <el-menu-item-group>
       
        <el-menu-item index="/home1/activity1">校园活动</el-menu-item>
        <el-menu-item index="/home1/volunteer1">志愿活动</el-menu-item>
<<<<<<< HEAD
        <el-menu-item index="/home1/volunteer2">我的活动</el-menu-item>
=======
>>>>>>> 115e22a (更新)
      </el-menu-item-group>
     
    </el-submenu>
    
    <el-menu-item index="/home1/document1" >
      <i class="el-icon-document"></i>
      <span slot="title">个人中心</span>
    </el-menu-item>
   
  </el-menu>
            </el-aside>
            <!-- 右侧内容主体 -->
            <el-main><router-view></router-view>
              
            </el-main>
        </el-container>
      </el-container>
  </div>
  </template>
  
  <script>
  export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
<<<<<<< HEAD
            this.$router.push('/');
=======
            this.$router.push('/login1');
>>>>>>> 115e22a (更新)
        }
    }
  };
  </script>
  
  <style lang="less" scoped>
   
   .homeWraper{
      position:absolute;
      top:0;
      left:0;
      height:100%;
      width:100%;
   }
   .el-container{
    padding:0px;
    margin:0px;
    height:100%;
   }
  
  .el-header{
     background-color: #c9c0d3;
     display: flex; //设置显示为flex布局
    justify-content: space-between; //设置为flex左右布局
    padding-left: 0; //左内边距为0（Logo贴左边）
     align-items: center;//元素上下居中（防止右边按钮贴上下边）
     color: rgb(255, 255, 255);
     font-size: 20px;
     > div {//内嵌的div样式
  
         span {
             margin-left: 15px;//文字左侧设置间距，防止与Logo紧贴
         }
     }
  }
  .el-aside{
     background-color: #eee5f8;
  }
  .el-main{
     background-color: #eaedf1;
  }
  </style>